<html>
<head>
<title>Page01_Book_Index.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #faa23d;}
.s2 { color: #e2da90;}
.s3 { color: #aa7dfc;}
.s4 { color: #db7e9b;}
.s5 { color: #52cb54;}
.s6 { color: #bbb529;}
.s7 { color: #b3e54c;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
Page01_Book_Index.ets</font>
</center></td></tr></table>
<pre><span class="s0">import </span><span class="s1">{ </span><span class="s0">promptAction</span><span class="s2">, </span><span class="s0">router </span><span class="s1">} </span><span class="s0">from </span><span class="s3">'@kit.ArkUI'</span>
<span class="s0">import http from </span><span class="s3">'@ohos.net.http'</span>


<span class="s0">interface BookResponse </span><span class="s1">{</span>
  <span class="s0">message</span><span class="s2">: </span><span class="s0">string</span>
  <span class="s0">data</span><span class="s2">: </span><span class="s0">Book</span><span class="s4">[]</span>
<span class="s1">}</span>

<span class="s0">export interface Book </span><span class="s1">{</span>
  <span class="s0">id</span><span class="s2">: </span><span class="s0">number</span>
  <span class="s0">bookname</span><span class="s2">: </span><span class="s0">string</span>
  <span class="s0">author</span><span class="s2">: </span><span class="s0">string</span>
  <span class="s0">publisher</span><span class="s2">: </span><span class="s0">string</span>
<span class="s1">}</span>

<span class="s5">// 删除的响应信息</span>
<span class="s0">interface BookId </span><span class="s1">{</span>
  <span class="s0">id</span><span class="s2">: </span><span class="s0">string</span>
<span class="s1">}</span>

<span class="s0">interface DeleteResponse </span><span class="s1">{</span>
  <span class="s0">message</span><span class="s2">: </span><span class="s0">string</span>
  <span class="s0">data</span><span class="s2">: </span><span class="s0">BookId</span>
<span class="s1">}</span>

<span class="s5">// 提取的 外号的变量</span>
<span class="s0">export const creator</span><span class="s2">: </span><span class="s0">string </span><span class="s2">= </span><span class="s3">'sxh'</span>

<span class="s6">@</span><span class="s0">Entry</span>
<span class="s6">@</span><span class="s0">Component</span>
<span class="s0">struct Day02_01_BookShelf </span><span class="s1">{</span>
  <span class="s6">@</span><span class="s0">State books</span><span class="s2">: </span><span class="s0">Book</span><span class="s4">[] </span><span class="s2">= </span><span class="s4">[</span><span class="s1">{</span>
    <span class="s0">id</span><span class="s2">: </span><span class="s7">1</span><span class="s2">,</span>
    <span class="s0">bookname</span><span class="s2">: </span><span class="s3">'西游记'</span><span class="s2">,</span>
    <span class="s0">author</span><span class="s2">: </span><span class="s3">'吴承恩'</span><span class="s2">,</span>
    <span class="s0">publisher</span><span class="s2">: </span><span class="s3">'人民文学出版社'</span>
  <span class="s1">}</span><span class="s4">]</span>
  <span class="s6">@</span><span class="s0">State isLoading</span><span class="s2">: </span><span class="s0">boolean </span><span class="s2">= </span><span class="s0">true</span>
  <span class="s5">// 提取请求对象</span>
  <span class="s0">req </span><span class="s2">= </span><span class="s0">http</span><span class="s2">.</span><span class="s0">createHttp</span><span class="s4">()</span>

  <span class="s0">async onPageShow</span><span class="s4">()</span><span class="s2">: </span><span class="s0">Promise</span><span class="s2">&lt;</span><span class="s0">void</span><span class="s2">&gt; </span><span class="s1">{</span>
    <span class="s0">await this</span><span class="s2">.</span><span class="s0">getBook</span><span class="s4">()</span>
  <span class="s1">}</span>

  <span class="s0">private async getBook</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">const Req </span><span class="s2">= </span><span class="s0">await this</span><span class="s2">.</span><span class="s0">req</span><span class="s2">.</span><span class="s0">request</span><span class="s4">(</span><span class="s3">'https://hmajax.itheima.net/api/books?creator=' </span><span class="s2">+ </span><span class="s0">encodeURIComponent</span><span class="s4">(</span><span class="s0">creator</span><span class="s4">))</span>
    <span class="s0">const result </span><span class="s2">= </span><span class="s0">JSON</span><span class="s2">.</span><span class="s0">parse</span><span class="s4">(</span><span class="s0">Req</span><span class="s2">.</span><span class="s0">result as string</span><span class="s4">) </span><span class="s0">as BookResponse</span>
    <span class="s0">this</span><span class="s2">.</span><span class="s0">books </span><span class="s2">= </span><span class="s0">result</span><span class="s2">.</span><span class="s0">data</span>
  <span class="s1">}</span>

  <span class="s0">private async addBook</span><span class="s4">(</span><span class="s0">id</span><span class="s2">: </span><span class="s0">number</span><span class="s4">) </span><span class="s1">{</span>
    <span class="s0">await this</span><span class="s2">.</span><span class="s0">req</span><span class="s2">.</span><span class="s0">request</span><span class="s4">(</span><span class="s3">'https://hmajax.itheima.net/api/books/' </span><span class="s2">+ </span><span class="s0">id</span><span class="s2">, </span><span class="s1">{</span>
      <span class="s0">method</span><span class="s2">: </span><span class="s0">http</span><span class="s2">.</span><span class="s0">RequestMethod</span><span class="s2">.</span><span class="s0">DELETE</span>
    <span class="s1">}</span><span class="s4">)</span>
    <span class="s0">this</span><span class="s2">.</span><span class="s0">getBook</span><span class="s4">()</span>
  <span class="s1">}</span>

  <span class="s0">private async deleteBooks</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">const bookesList </span><span class="s2">= </span><span class="s0">this</span><span class="s2">.</span><span class="s0">books</span><span class="s2">.</span><span class="s0">map</span><span class="s4">(</span><span class="s0">async </span><span class="s4">(</span><span class="s0">item</span><span class="s4">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
      <span class="s0">return this</span><span class="s2">.</span><span class="s0">req</span><span class="s2">.</span><span class="s0">request</span><span class="s4">(</span><span class="s3">'https://hmajax.itheima.net/api/books/' </span><span class="s2">+ </span><span class="s0">item</span><span class="s2">.</span><span class="s0">id</span><span class="s2">, </span><span class="s1">{</span>
        <span class="s0">method</span><span class="s2">: </span><span class="s0">http</span><span class="s2">.</span><span class="s0">RequestMethod</span><span class="s2">.</span><span class="s0">DELETE</span>
      <span class="s1">}</span><span class="s4">)</span>
    <span class="s1">}</span><span class="s4">)</span>
    <span class="s0">await bookesList</span>
    <span class="s0">promptAction</span><span class="s2">.</span><span class="s0">showToast</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">message</span><span class="s2">: </span><span class="s3">'删除成功' </span><span class="s1">}</span><span class="s4">)</span>
    <span class="s5">// const resList = await Promise.all(addBooks)</span>
    <span class="s0">this</span><span class="s2">.</span><span class="s0">getBook</span><span class="s4">()</span>
  <span class="s1">}</span>

  <span class="s0">build</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Column</span><span class="s4">() </span><span class="s1">{</span>
      <span class="s5">// 头部</span>
      <span class="s0">this</span><span class="s2">.</span><span class="s0">HeaderBuilder</span><span class="s4">()</span>

      <span class="s5">// 没有数据 loading</span>
      <span class="s0">if </span><span class="s4">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">books</span><span class="s2">.</span><span class="s0">length </span><span class="s2">== </span><span class="s7">0</span><span class="s4">) </span><span class="s1">{</span>
        <span class="s0">Text</span><span class="s4">(</span><span class="s3">'空空如也~'</span><span class="s4">)</span>
      <span class="s1">} </span><span class="s0">else </span><span class="s1">{</span>
        <span class="s5">// 有数据 渲染</span>
        <span class="s0">List</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">15 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
          <span class="s0">ForEach</span><span class="s4">(</span><span class="s0">this</span><span class="s2">.</span><span class="s0">books</span><span class="s2">, </span><span class="s4">(</span><span class="s0">item</span><span class="s2">: </span><span class="s0">Book</span><span class="s4">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
            <span class="s0">ListItem</span><span class="s4">() </span><span class="s1">{</span>
              <span class="s0">bookItem</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">data</span><span class="s2">: </span><span class="s0">item </span><span class="s1">}</span><span class="s4">)</span>
            <span class="s1">}</span>
            <span class="s2">.</span><span class="s0">swipeAction</span><span class="s4">(</span><span class="s1">{</span>
              <span class="s0">end</span><span class="s2">: </span><span class="s4">() </span><span class="s2">=&gt; </span><span class="s1">{</span>
                <span class="s0">this</span><span class="s2">.</span><span class="s0">itemEnd</span><span class="s4">(</span><span class="s0">item</span><span class="s4">)</span>
              <span class="s1">}</span><span class="s2">,</span>
              <span class="s0">edgeEffect</span><span class="s2">: </span><span class="s0">SwipeEdgeEffect</span><span class="s2">.</span><span class="s0">Spring</span>
            <span class="s1">}</span><span class="s4">)</span>
            <span class="s2">.</span><span class="s0">onClick</span><span class="s4">(() </span><span class="s2">=&gt; </span><span class="s1">{</span>
              <span class="s5">// 添加跳转逻辑</span>
              <span class="s0">router</span><span class="s2">.</span><span class="s0">pushUrl</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">url</span><span class="s2">: </span><span class="s3">'/pages/Page02_Book_AddOrEdit'</span><span class="s2">.</span><span class="s0">slice</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span><span class="s2">, </span><span class="s0">params</span><span class="s2">: </span><span class="s1">{ </span><span class="s0">id</span><span class="s2">: </span><span class="s0">item</span><span class="s2">.</span><span class="s0">id </span><span class="s1">} }</span><span class="s4">)</span>
            <span class="s1">}</span><span class="s4">)</span>
          <span class="s1">}</span><span class="s4">)</span>
        <span class="s1">}</span>
        <span class="s2">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
      <span class="s1">}</span>


    <span class="s1">}</span>
    <span class="s2">.</span><span class="s0">height</span><span class="s4">(</span><span class="s3">'100%'</span><span class="s4">)</span>
    <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s3">'100%'</span><span class="s4">)</span>
  <span class="s1">}</span>

  <span class="s6">@</span><span class="s0">Builder</span>
  <span class="s0">HeaderBuilder</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Row</span><span class="s4">() </span><span class="s1">{</span>
      <span class="s5">// 顶部左侧</span>
      <span class="s0">Image</span><span class="s4">(</span><span class="s0">$r</span><span class="s4">(</span><span class="s3">'app.media.ic_public_drawer_filled'</span><span class="s4">))</span>
        <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">onClick</span><span class="s4">(() </span><span class="s2">=&gt; </span><span class="s1">{</span>
          <span class="s0">promptAction</span><span class="s2">.</span><span class="s0">showDialog</span><span class="s4">(</span><span class="s1">{</span>
            <span class="s0">title</span><span class="s2">: </span><span class="s3">'友情提示'</span><span class="s2">,</span>
            <span class="s0">message</span><span class="s2">: </span><span class="s3">'你真要全部删除吗'</span><span class="s2">,</span>
            <span class="s0">buttons</span><span class="s2">: </span><span class="s4">[</span>
              <span class="s1">{</span>
                <span class="s0">text</span><span class="s2">: </span><span class="s3">'狠心删除'</span><span class="s2">,</span>
                <span class="s0">color</span><span class="s2">: </span><span class="s3">'#000000'</span>
              <span class="s1">}</span><span class="s2">,</span>
              <span class="s1">{</span>
                <span class="s0">text</span><span class="s2">: </span><span class="s3">'继续保留'</span><span class="s2">,</span>
                <span class="s0">color</span><span class="s2">: </span><span class="s3">'#ec6073'</span>
              <span class="s1">}</span>
            <span class="s4">]</span><span class="s2">,</span>
          <span class="s1">}</span><span class="s4">)</span>
            <span class="s2">.</span><span class="s0">then</span><span class="s4">(</span><span class="s0">data </span><span class="s2">=&gt; </span><span class="s1">{</span>
              <span class="s5">// TODO 添加清空逻辑</span>
              <span class="s0">if </span><span class="s4">(</span><span class="s0">data</span><span class="s2">.</span><span class="s0">index </span><span class="s2">=== </span><span class="s7">0</span><span class="s4">) </span><span class="s1">{</span>
                <span class="s0">this</span><span class="s2">.</span><span class="s0">deleteBooks</span><span class="s4">()</span>
              <span class="s1">}</span>
            <span class="s1">}</span><span class="s4">)</span>
        <span class="s1">}</span><span class="s4">)</span>


      <span class="s0">Text</span><span class="s4">(</span><span class="s3">'我的书架'</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">25</span><span class="s4">)</span>

      <span class="s0">Image</span><span class="s4">(</span><span class="s0">$r</span><span class="s4">(</span><span class="s3">'app.media.ic_public_add'</span><span class="s4">))</span>
        <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">onClick</span><span class="s4">(() </span><span class="s2">=&gt; </span><span class="s1">{</span>
          <span class="s0">router</span><span class="s2">.</span><span class="s0">pushUrl</span><span class="s4">(</span><span class="s1">{</span>
            <span class="s0">url</span><span class="s2">: </span><span class="s3">'/pages/Page02_Book_AddOrEdit'</span><span class="s2">.</span><span class="s0">slice</span><span class="s4">(</span><span class="s7">1</span><span class="s4">)</span>
          <span class="s1">}</span><span class="s4">)</span>
        <span class="s1">}</span><span class="s4">)</span>
    <span class="s1">}</span>
    <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s3">'100%'</span><span class="s4">)</span>
    <span class="s2">.</span><span class="s0">justifyContent</span><span class="s4">(</span><span class="s0">FlexAlign</span><span class="s2">.</span><span class="s0">SpaceBetween</span><span class="s4">)</span>
    <span class="s2">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">60</span><span class="s4">)</span>
    <span class="s2">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s7">10</span><span class="s4">)</span>
    <span class="s2">.</span><span class="s0">border</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">width</span><span class="s2">: </span><span class="s1">{ </span><span class="s0">bottom</span><span class="s2">: </span><span class="s7">2 </span><span class="s1">}</span><span class="s2">, </span><span class="s0">color</span><span class="s2">: </span><span class="s3">'#f0f0f0' </span><span class="s1">}</span><span class="s4">)</span>
    <span class="s2">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">White</span><span class="s4">)</span>
  <span class="s1">}</span>

  <span class="s6">@</span><span class="s0">Builder</span>
  <span class="s5">// 传递参数的时候，如果可以，一般会传递整个对象，方便后续逻辑的调整</span>
  <span class="s5">// 如果只传递 id，那么提示书名的功能就不太好做了</span>
  <span class="s0">itemEnd</span><span class="s4">(</span><span class="s0">item</span><span class="s2">: </span><span class="s0">Book</span><span class="s4">) </span><span class="s1">{</span>
    <span class="s0">Row</span><span class="s4">() </span><span class="s1">{</span>
      <span class="s0">Button</span><span class="s4">(</span><span class="s3">'删除'</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">type</span><span class="s4">(</span><span class="s0">ButtonType</span><span class="s2">.</span><span class="s0">Normal</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s3">'#da3231'</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">onClick</span><span class="s4">(() </span><span class="s2">=&gt; </span><span class="s1">{</span>
          <span class="s5">// 文档中，有基础的代码模版，直接C+V</span>
          <span class="s0">promptAction</span><span class="s2">.</span><span class="s0">showDialog</span><span class="s4">(</span><span class="s1">{</span>
            <span class="s0">title</span><span class="s2">: </span><span class="s3">'友情提示！'</span><span class="s2">,</span>
            <span class="s0">message</span><span class="s2">: </span><span class="s3">`你真的要删掉 </span><span class="s1">${</span><span class="s0">item</span><span class="s2">.</span><span class="s0">bookname</span><span class="s1">} </span><span class="s3">这本书吗，(╥╯^╰╥)`</span><span class="s2">,</span>
            <span class="s0">buttons</span><span class="s2">: </span><span class="s4">[</span>
              <span class="s1">{</span>
                <span class="s0">text</span><span class="s2">: </span><span class="s3">'取消'</span><span class="s2">,</span>
                <span class="s0">color</span><span class="s2">: </span><span class="s3">'#000'</span>
              <span class="s1">}</span><span class="s2">,</span>
              <span class="s1">{</span>
                <span class="s0">text</span><span class="s2">: </span><span class="s3">'确认'</span><span class="s2">,</span>
                <span class="s0">color</span><span class="s2">: </span><span class="s3">'#ae2827'</span>
              <span class="s1">}</span>
            <span class="s4">]</span><span class="s2">,</span>
          <span class="s1">}</span><span class="s4">)</span>
            <span class="s2">.</span><span class="s0">then</span><span class="s4">((</span><span class="s0">data</span><span class="s4">) </span><span class="s2">=&gt; </span><span class="s1">{</span>
              <span class="s0">if </span><span class="s4">(</span><span class="s0">data</span><span class="s2">.</span><span class="s0">index</span><span class="s4">) </span><span class="s1">{</span>
                <span class="s0">this</span><span class="s2">.</span><span class="s0">addBook</span><span class="s4">(</span><span class="s0">item</span><span class="s2">.</span><span class="s0">id</span><span class="s4">)</span>
              <span class="s1">}</span>
            <span class="s1">}</span><span class="s4">)</span>

        <span class="s1">}</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">height</span><span class="s4">(</span><span class="s3">'100%'</span><span class="s4">)</span>
    <span class="s1">}</span>

  <span class="s1">}</span>
<span class="s1">}</span>

<span class="s6">@</span><span class="s0">Component</span>
<span class="s0">struct bookItem </span><span class="s1">{</span>
  <span class="s0">data</span><span class="s2">: </span><span class="s0">Partial</span><span class="s2">&lt;</span><span class="s0">Book</span><span class="s2">&gt; = </span><span class="s1">{}</span>

  <span class="s0">build</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Row</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">10 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
      <span class="s0">Image</span><span class="s4">(</span><span class="s0">$r</span><span class="s4">(</span><span class="s3">'app.media.ic_public_cover'</span><span class="s4">))</span>
        <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s7">108</span><span class="s4">)</span>
        <span class="s2">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">108</span><span class="s4">)</span>
      <span class="s0">Column</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s2">: </span><span class="s7">5 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>

        <span class="s0">Text</span><span class="s4">(</span><span class="s3">'书名：' </span><span class="s2">+ </span><span class="s0">this</span><span class="s2">.</span><span class="s0">data</span><span class="s2">.</span><span class="s0">bookname</span><span class="s4">)</span>
          <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">20</span><span class="s4">)</span>
        <span class="s0">Text</span><span class="s4">(</span><span class="s3">'作者：' </span><span class="s2">+ </span><span class="s0">this</span><span class="s2">.</span><span class="s0">data</span><span class="s2">.</span><span class="s0">author</span><span class="s4">)</span>
          <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">14</span><span class="s4">)</span>
          <span class="s2">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Gray</span><span class="s4">)</span>
        <span class="s0">Blank</span><span class="s4">()</span>
        <span class="s0">Text</span><span class="s4">(</span><span class="s3">'出版社: ' </span><span class="s2">+ </span><span class="s0">this</span><span class="s2">.</span><span class="s0">data</span><span class="s2">.</span><span class="s0">publisher</span><span class="s4">)</span>
          <span class="s2">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s7">14</span><span class="s4">)</span>
          <span class="s2">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s0">Color</span><span class="s2">.</span><span class="s0">Gray</span><span class="s4">)</span>
      <span class="s1">}</span>
      <span class="s2">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s2">: </span><span class="s7">10</span><span class="s2">, </span><span class="s0">bottom</span><span class="s2">: </span><span class="s7">10 </span><span class="s1">}</span><span class="s4">)</span>
      <span class="s2">.</span><span class="s0">height</span><span class="s4">(</span><span class="s7">108</span><span class="s4">)</span>
      <span class="s2">.</span><span class="s0">alignItems</span><span class="s4">(</span><span class="s0">HorizontalAlign</span><span class="s2">.</span><span class="s0">Start</span><span class="s4">)</span>
    <span class="s1">}</span>
    <span class="s2">.</span><span class="s0">width</span><span class="s4">(</span><span class="s3">'100%'</span><span class="s4">)</span>
  <span class="s1">}</span>
<span class="s1">}</span></pre>
</body>
</html>